<template>
  <div id="root">
    <!-- <div class="table">
      <div class="header">
        <div class="col">数据</div>
        <div class="col" v-for="(item, index) in headerList" :key="index">
          {{ item }}
        </div>
      </div>
      <div class="row" v-for="(row, rowIndex) in param" :key="rowIndex">
        <div class="col">
          {{ row }}
        </div>
        <div
          class="col"
          v-for="(col, index) in dataList[rowIndex]"
          :key="index"
        >
          {{ col.value }}
        </div>
      </div>
    </div> -->
    <!-- <table class="table1">
      <thead>
        <tr>
          <th>数据</th>
          <th v-for="name,index in headerList" :key="index">{{ name }}</th>
        </tr>
      </thead>
      <tr v-for="(row, rowIndex) in param" :key="rowIndex">
        <td class="col0">{{row}}</td>
        <td v-for="item,index in dataList[rowIndex]" :key="index" class="td">
            {{item.value}}
        </td>
      </tr>
    </table> -->
    <el-table
      id="totalDataTable"
      :data="tableData"
      min-height="440"
    >
      <el-table-column prop="data" label="数据" align="center" width="180">
      </el-table-column>
      <el-table-column
        :prop="header"
        :label="header"
        align="center"
        v-for="(header, index) in headerList"
        :key="index"
        min-width="120"
      >
      </el-table-column>
      <!-- <el-table-column
        prop="name"
        label="姓名"
        align="center"
        >
      </el-table-column> -->
    </el-table>
  </div>
</template>

<script>
export default {
  name: "TotalDataTable",
  props: ["dataObj"],
  watch: {
    dataObj(n, o) {
      console.log("子组件拿到的值", n);
      let {
        intervalAccumulatedFlowList, //区间累计流量
        intervalAccumulatedHeatList, //区间累计热量
        returnWaterTemperatureList, //回水温度列表
        roomTemperatureList, //室内温度
        outdoorTemperatureList, //室外温度
        totalAccumulatedFlowList, //累计总流量
        totalAccumulatedHeatList, //累计总热量
        waterSupplyTemperatureList, //供水温度
        nameList, //名称
      } = n;
      this.headerList = nameList;
      // this.$set(this.dataList, 0, outdoorTemperatureList);
      // this.$set(this.dataList, 1, roomTemperatureList);
      // this.$set(this.dataList, 2, waterSupplyTemperatureList);
      // this.$set(this.dataList, 3, returnWaterTemperatureList);
      // this.$set(this.dataList, 4, intervalAccumulatedHeatList);
      // this.$set(this.dataList, 5, totalAccumulatedHeatList);
      // this.$set(this.dataList, 6, intervalAccumulatedFlowList);
      // this.$set(this.dataList, 7, totalAccumulatedFlowList);


      // this.tableData.forEach((item, index) => {
      //   if (index === 0) {
      //     nameList.forEach((name,nameIndex) => {
      //       this.$set(item, name, outdoorTemperatureList[nameIndex].value);
      //     });
      //   }
      //   if (index === 1) {
      //     nameList.forEach((name,nameIndex) => {
      //       this.$set(item, name, roomTemperatureList[nameIndex].value);
      //     });
      //   }
      //   if (index === 2) {
      //     nameList.forEach((name,nameIndex) => {
      //       item[name] = waterSupplyTemperatureList[nameIndex].value;
      //     });
      //   }
      //   if (index === 3) {
      //     nameList.forEach((name,nameIndex) => {
      //       item[name] = returnWaterTemperatureList[nameIndex].value;
      //     });
      //   }
      //   if (index === 4) {
      //     nameList.forEach((name,nameIndex) => {
      //       item[name] = intervalAccumulatedHeatList[nameIndex].value;
      //     });
      //   }
      //   if (index === 5) {
      //     nameList.forEach((name,nameIndex) => {
      //       item[name] = totalAccumulatedHeatList[nameIndex].value;
      //     });
      //   }
      //   if (index === 6) {
      //     nameList.forEach((name,nameIndex) => {
      //       item[name] = intervalAccumulatedFlowList[nameIndex].value;
      //     });
      //   }
      //   if (index === 7) {
      //     nameList.forEach((name,nameIndex) => {
      //       item[name] = totalAccumulatedFlowList[nameIndex].value;
      //     });
      //   }
      //   // item[nameList[index]] = roomTemperatureList[index]
      //   // item[nameList[index]] = waterSupplyTemperatureList[index]
      //   // item[nameList[index]] = returnWaterTemperatureList[index]
      //   // item[nameList[index]] = intervalAccumulatedHeat[index]
      //   // item[nameList[index]] = totalAccumulatedHeatList[index]
      //   // item[nameList[index]] = intervalAccumulatedFlowList[index]
      //   // item[nameList[index]] = totalAccumulatedFlow[index]
      // });
      outdoorTemperatureList.forEach(item=>{
        this.$set(this.tableData[0],item.name,item.value)       //室外温度
      })
      roomTemperatureList.forEach(item=>{
        this.$set(this.tableData[1],item.name,item.value)       //室内温度
      })
      waterSupplyTemperatureList.forEach(item=>{
        this.$set(this.tableData[2],item.name,item.value)       //供水温度
      })
      returnWaterTemperatureList.forEach(item=>{
        this.$set(this.tableData[3],item.name,item.value)       //回水温度
      })
      intervalAccumulatedHeatList.forEach(item=>{
        this.$set(this.tableData[4],item.name,item.value)       //区间累计热量
      })
      totalAccumulatedHeatList.forEach(item=>{
        this.$set(this.tableData[5],item.name,item.value)       //总累计热量
      })
      intervalAccumulatedFlowList.forEach(item=>{
        this.$set(this.tableData[6],item.name,item.value)       //区间累计流量
      })
      totalAccumulatedFlowList.forEach(item=>{
        this.$set(this.tableData[7],item.name,item.value)       //总累计流量
      })
      console.log("tableData",this.tableData);
    },
  },
  data() {
    return {
      tableData: [
        {
          data: '室外温度 ℃',

        },
        {
          data: '室内温度 ℃',

        },
        {
          data: '供水温度 ℃',

        },
        {
          data: '回水温度 ℃',

        },
        {
          data: '区间累计热量 kWh',

        },
        {
          data: "总累计热量 kWh",

        },
        {
          data: "区间累计流量 m³",

        },
        {
          data: "总累计流量 m³",
        },
      ],

      headerList: [],

    };
  },

};
</script>

<style lang="scss" scoped>
.header {
  display: flex;
  // display: grid;
  // grid-template-columns: repeat(auto-fill, minmax(120px, auto));
  // grid-auto-flow: column;
}
.table {
  height: 310px;
  width: 100%;
  font-size: 14px;
  overflow-x: auto;
  color: #fff;
  text-align: center;
  // grid-template-columns: 1fr auto;
  .row {
    width: 100%;
    // display: grid;
    // grid-template-columns: repeat(auto-fill, minmax(120px, auto));
    // grid-auto-flow: column;
    display: flex;
    // grid-template-columns: 200px;
  }
  .col {
    min-width: 140px;
    height: 30px;
    line-height: 30px;
    margin-right: 20px;
    flex-shrink: 0;
  }
}
.table1 {
  text-align: center;
  color: #fff;
  .col0 {
    width: 50px;
  }
  .td {
    width: 100%;
  }
}


#totalDataTable {
  ::v-deep .el-table {
    margin-top: 0;
    border: 0;
  }


  ::v-deep .el-table__body-wrapper {
    //  height: 370px !important;
    // width: 100%;
    background-color: #444f64;
  }
  ::v-deep .is-scrolling-none {
    
    background-color: #444f64;
  }
//当选择多个字段是，可能出现滚动条区域bug，设置高度可解决
  ::v-deep .is-scrolling-left {
    
    background-color: #444f64;
  }
  ::v-deep .el-table__row {
    height: 30px !important;
    // display: inline-block;
  }
  ::v-deep el-table__header{
    height: 30px;
  }

  ::v-deep .el-table__header-wrapper thead tr th{
  background-color: #374056 !important;
  border-radius:0
}
}
// #root{
//   ::deep .el-table{
//   background-color:#374056 !important;
// }
// }


</style>
